import React, { Component } from 'react'
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { routes, whiteList } from "./config";

// 渲染路由视图，加路由守卫
const RouterView = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Redirect exact path="/" to="/blogs" />
                {routes.map((item) => {
                    return (
                        <Route
                            key={item.path}
                            path={item.path}
                            render={(props) => {
                                // 检查你有没有登录，如果没有登录，不让你访问白名单以外的路由
                                const token = window.sessionStorage.getItem(
                                    "token"
                                );

                                // 如果有 token，或者路由路径在白名单中，就直接返回路由对应的组件
                                if (token || whiteList.includes(item.path)) {
                                    return <item.component {...props} />;
                                }
                                
                                // 如果没有登录，也没有在白名单中，那就去登录
                                return <Redirect to="/login" />;
                            }}
                        />
                    );
                })}
            </Switch>
        </BrowserRouter>
    );
};

export default RouterView;
